<template>
  <div>
    <p>{{ num }}</p>
    <p>{{ type }}</p>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onUpdated, onUnmounted } from 'vue';
export default {
  setup() {
    var timer = null;
    let state = reactive({
      num: 1,
      type: '奇数',
    });
    const autoPlay = () => {
      state.num += 1;
      if (state.num == 5) {
        state.num = 0;
      }
    };
    const paly = () => {
      timer = setInterval(autoPlay, 1000);
    };
    onMounted(() => {
      //挂载完成
      paly();
    });
    onUpdated(() => {
      if (state.num % 2 == 0) {
        state.type = '偶数';
      } else {
        state.type = '奇数';
      }
    });
    onUnmounted(() => {
      clearInterval(timer);
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style></style>
